<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
    <!--<script src="/static/js/jquery.js"></script>-->
    <!--<script src="/static/js/bootstrap.min.js"></script>-->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <title>Document</title>
</head>

<style>
      ul.pagination {
    /*width: auto;*/
    position: absolute;
    left:30em;right:0;
    margin:0 auto;
    bottom:0;
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {
    display: inline;
}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 5px;
}

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;
}

ul.pagination li a:hover:not(.active) {background-color: #4CAF50;}
    html{
        width: 100%;
        height: 100%;
    }
    a{
        list-style: none;
    }
    .add{
        width: 200px;
        /*background: red;*/
        margin-bottom: 10px;
        line-height: 50px;
    }
    .add img{
        width: 30px;
        height:30px;
    }
    .add span{
        margin-left: 5px;
    }
    tr{
         max-height: 20px;
         overflow: hidden;
    }
    td[name=catinfo] div{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /*display: block;*/
        max-width: 250px;
        max-height: 20px;
         /*overflow: hidden;*/

    }
</style>
<body>

<div class="add"><a href="/catadd/"><img src="/static/image/png/add.png" alt=""><span>章节添加</span></a></div>
{% if data %}
    <table class="table table-striped">
        <tr>
            <th>书名</th>
             <th>章节序号</th>
            <th>章节名</th>
            <th>章节内容</th>
            <th>操作</th>
        </tr>
        {% for item in data %}
            <tr>
                <td name="bookid">{{ item.bookname}}</td>
                <td name="bookcatid">{{ item.catid}}</td>
                <td name="catname">{{ item.catname }}</td>
                <td name="catinfo"><div class="">{{ item.catinfo}}</div></td>
                <td>
                    <a href="/catedit/?catid={{item.catid}}"><img src="../static/image/png/edit.png" alt="" style="width: 20px;"></a>
                    <a href="/catdel/?catid={{item.catid}}"><img src="../static/image/png/del.png" alt="" style="width: 20px;"></a>
                </td>
            </tr>
        {% endfor %}
    </table>
{% else %}
没有数据
{% endif %}

{{ page |safe}}
</body>
</html>